<!DOCTYPE html>
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">-->
<html>
    <head lang="zh">
        <meta charset="UTF-8">
            <link rel="stylesheet" type="text/css" href="sanguo.css">
    </head>
  <body>
    <script>
      
      // 这2句是必须写的
      function connectWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) {
          callback(WebViewJavascriptBridge)
        } else {
          document.addEventListener('WebViewJavascriptBridgeReady', function() {
                                    callback(WebViewJavascriptBridge)
                                    }, false)
        }
      }
    // 这2句是必须写的
    connectWebViewJavascriptBridge(function(bridge) {
                                   
                                   /* Init your app here */
                                   // 从OC  bridge.send 方法过来的 就会调用到这个方法
                                   bridge.init(function(message, responseCallback) {
                                               
                                               // alert('Received message: ' + message)
                                               if (message.match("replaceimage")) {
                                               //先截取图片id
                                               var index=message.indexOf(",")
                                               var messagereplace=message.substring(0,index)
                                               
                                               //截取到本地图片的路径
                                               var messagepath=message.substring(index+1)
                                               
                                               messagereplace=messagereplace.replace(/replaceimage/,"")
                                               element=document.getElementById(messagereplace)
                                               
                                               if (element.src.match("loading"))
                                               {
                                               
                                               element.src = messagepath
                                               }
                                               }
                                               if (responseCallback) {
                                               responseCallback("send Right back atcha")
                                               }
                                               })
                                   // 从oc通过Handler发送过来的就会调用这个函数
                                   bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
                                                          var responseData = { 'Javascript Says':'Right back atcha!' }
                                                          alert('Received message: ' + data)
                                                          if (responseCallback) {
                                                          responseCallback(responseData)
                                                          }
                                                          })
                                   
                                   // TODO: 想做点什么在这边（connectWebViewJavascriptBridge函数里面）
                                   //send
                                   var button1 = document.getElementById('button1')
                                   button1.onclick = function() {
                                   var data = 'Hello from JS button'
                                   bridge.send(data, function(responseData) {
                                               
                                               })
                                   }
                                   // call handler
                                   var button2 = document.getElementById('button2')
                                   button2.onclick = function() {
                                   // 注意标示要一致
                                   bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
                                                      
                                                      })
                                   }
                                   })
                                   
      </script>
    <p>mainnews</p>
  </body>
</html>
